<template>
  <!-- form表单的约定，双向绑定v-model="formData" -->
  <!-- v-model 绑定的就是modelValue的属性 -->
  <el-form :model="formData" label-width="120px">
    <el-form-item label="商品名称">
      <el-input v-model="formData.name" />
    </el-form-item>

    <el-form-item label="副标题">
      <el-input v-model="formData.subName" :rows="2" type="textarea" />
    </el-form-item>

    <el-form-item label="商品图片">
      <el-space wrap>
        <Tuku v-model="formData.img1"></Tuku>
        <Tuku v-model="formData.img2"></Tuku>
        <Tuku v-model="formData.img3"></Tuku>
      </el-space>
    </el-form-item>

    <el-form-item label="类目">
      <CategoryTree v-model="formData.categoryId"></CategoryTree>
    </el-form-item>

    <el-form-item label="排序">
      <el-input-number v-model="formData.seq" :min="1" :max="99" />
    </el-form-item>

    <el-form-item label="价格">
      <el-input-number v-model="formData.price" :precision="2" :step="0.1" />
    </el-form-item>

    <el-form-item label="标签">
      <!-- <el-input v-model="formData.tags" /> -->
      <el-tag v-for="tag in formData.tagArray" :key="tag" class="tag" closable :disable-transitions="false"
        @close="tagClose(tag)">
        {{ tag }}
      </el-tag>
      <el-input v-if="tagInputVisible" ref="tagInputRef" v-model="tagValue" size="small"
        @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
      <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput">
        + 新标签
      </el-button>
    </el-form-item>

    <el-form-item label="描述">
      <Editor v-model="formData.brief"></Editor>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">保存</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
// nextTick 代表一个方法，当下次更新/渲染的时候，去触发这个方法
import { ref, reactive ,nextTick ,onMounted} from "vue";
import { ElMessage } from 'element-plus'
// ref 是针对某一个变量的引用，reactive 是针对对象的引用

import Tuku from "@/components/Tuku.vue";
import Editor from "@/components/Editor.vue";
import CategoryTree from "@/components/CategoryTree.vue";
import { productApi } from "@/api";
import { useRoute } from "vue-router";
const route = useRoute()
const tagInputRef = ref()
const tagValue = ref('')
const tagInputVisible = ref(false)
// 因为formData 是一个对象
const formData = reactive({
  id:0,
  name: "",
  subName: "",
  img1: "", img2: "", img3: "",
  price: 0,
  seq: 0,
  tagArray: [],
  categoryId: 0,
  brief: ""
})
const tagClose = (tag:any)=>{
  formData.tagArray.splice(formData.tagArray.indexOf(tag), 1)
}

const handleInputConfirm = () => {
  if (tagValue.value) {
    formData.tagArray.push(tagValue.value)
  }
  tagInputVisible.value = false
  tagValue.value = ''
}

const showInput = () => {
  tagInputVisible.value = true
  nextTick(() => {
    tagInputRef.value!.input!.focus()
  })
}
onMounted(() => {
  formData.id = Number(route.query.id)
  callProductApi()
})
const callProductApi = ()=>{
  productApi.select.call({id:formData.id}).then((res:any)=>{
    // console.log(res);
    formData.name = res[0].name
    formData.subName = res[0].subName
    formData.img1 = res[0].img.split(",")[0]
    formData.img2 = res[0].img.split(",")[1]
    formData.img3 = res[0].img.split(",")[2]
    formData.price = res[0].price
    formData.seq = res[0].seq
    formData.tagArray = res[0].tags.split(",")
    // formData.tagArray = res[0].tagArray
    // formData.tagArray.push(res[0].tagArray)
    formData.categoryId = res[0].categoryId
    formData.brief = res[0].brief
  })
}
// onSubmit是一个方法
const onSubmit = () => {
  // console.log(formData);
  let imgs = []
  if (formData.img1 != "") {
    imgs.push(formData.img1);
    formData.img1 = ""
  }
  if (formData.img2 != "") {
    imgs.push(formData.img2);
    formData.img2 = ""
  }
  if (formData.img3 != "") {
    imgs.push(formData.img3);
    formData.img3 = ""
  }

  productApi.insert.call({ img: imgs.join(","), tags:formData.tagArray.join(","),...formData }).then((res) => {
    // console.log(res);
    ElMessage.success('保存成功')

  })
}
</script>
<style scoped>
.tag{
  margin-right: 10px;
}
</style>